<template>
  <view>
    <view class="patientcon">
      <view class="patientcon-top">
        <view class="color666 marginbot4">请选择患者信息</view>
        <view class="color999 fontsize14">
          以便医生给出更准确的治疗，信息仅医生可见
        </view>
      </view>
      <view class="patient-main" v-for="(item, index) in PatientList" :key="item.patientId">
        <view class="flexrow flexbetween patient-user-main">
          <view class="flexrow patient-user">
            <view @click="toClick(item)">
              <image v-if="item.patientshow == 1"
                src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/login/choose.png" mode=""></image>
              <image v-if="item.patientshow == ''"
                src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/login/nochoose.png" mode="">
              </image>
            </view>
            <view class="color333">{{ item.name }}</view>
          </view>
          <view class="color3FA" @click="editpatient(item.patientId)">
            编辑
          </view>
        </view>
        <view class="fontsize14 color333 patient-detail">
          <view>
            {{ gendertosex(item.gender) }} {{ $getAge(item.birthday || "-") }}岁
            {{ item.weight || 0 }}kg {{ item.height || 0 }}cm
          </view>
          <view>
            过敏史 ：
            <template v-if="item.ifAllergy == 1">无</template>
            <template v-if="item.ifAllergy == 2">
              有 {{ item.allergy || "" }}
            </template>
          </view>
          <!-- <view>
						既往史 ：
						<template v-if="item.ifPast == 1">无</template>
						<template v-if="item.ifPast == 2">
							有 {{ item.past || "" }}
						</template>
					</view>
					<view>
						手术史 ：
						<template v-if="item.ifPast == 1">无</template>
						<template v-if="item.ifPast == 2">
							有 {{ item.surgery || "" }}
						</template>
					</view> -->
        </view>
        <view class="line" v-if="PatientList.length - 1 != index"></view>
      </view>
      <!-- <lack v-if="PatientList.length==0"></lack> -->
      <view class="patient-main">
        <view class="flexcolumn flexcenter patient-add" @click="toadd">
          <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/addp.png" mode=""></image>
          <view class="color999">添加患者</view>
        </view>
      </view>
    </view>
    <view class="mybtn">
      <my-button borderRadius="8" height="96" width="670" hoverClass="none" @click="nextstep">
        下一步
      </my-button>
    </view>
  </view>
</template>

<script>
import { getPatientList } from '../../../api/index.js'
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    MyButton
  },
  data() {
    return {
      patientshow: false,
      Diseasequery: {},
      PatientList: [],
    };
  },
  onShow() {
    if (this.$store.state.chronic.patientId) {
      this._getPatientList();
    }
  },
  onLoad(options) {
    this.Diseasequery = JSON.parse(decodeURIComponent(options.Diseasequery));
    this._getPatientList();
  },
  methods: {
    //性别转换
    gendertosex(val) {
      let name = "";
      switch (val) {
        case 1:
          name = "男";
          break;
        case 2:
          name = "女";
          break;
        case 3:
          name = "其他";
          break;
      }
      return name;
    },
    //编辑患者信息
    editpatient(patientId) {
      let Diseasequery = encodeURIComponent(JSON.stringify(this.Diseasequery));
      uni.navigateTo({
        url: `../addpatient/addpatient?patientId=${patientId}&Diseasequery=${Diseasequery}`,
      });
    },
    //获取患者列表
    _getPatientList() {
      getPatientList().then((res) => {
        let arr = [];
        arr = res.data;
        arr.forEach((item) => {
          item.patientshow = "";
          if (this.$store.state.chronic.patientId == item.patientId) {
            item.patientshow = 1;
          }
        });
        this.PatientList = arr;
        this.$store.state.chronic.patientId = "";
      });
    },
    toClick(e) {
      console.log(e);
      this.PatientList.forEach((item) => {
        item.patientshow = "";
        if (e.patientId == item.patientId) {
          item.patientshow = 1;
        }
      });
      console.log(this.PatientList);
    },
    toadd() {
      let Diseasequery = encodeURIComponent(JSON.stringify(this.Diseasequery));
      uni.navigateTo({
        url: "../addpatient/addpatient?Diseasequery=" + Diseasequery,
      });
    },
    nextstep() {
      this.PatientList.forEach((item) => {
        if (item.patientshow == 1) {
          this.Diseasequery.patientId = item.patientId;
        }
      });
      if (!this.Diseasequery.patientId) {
        this.$toast("请选择患者");
        return;
      }
      console.log(this.Diseasequery);
      let Diseasequery = encodeURIComponent(JSON.stringify(this.Diseasequery));
      uni.navigateTo({
        url: "../payment/payment?Diseasequery=" + Diseasequery,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  padding-bottom: 60rpx;
}

.patientcon {
  width: 100vw;
  padding-bottom: 150rpx;

  .patientcon-top {
    background-color: #f7f7f7;
    padding-top: 28rpx;
    padding-bottom: 28rpx;

    .marginbot4 {
      margin-bottom: 8rpx;
    }
  }

  .patient-main {
    .patient-user-main {
      border-bottom: 2rpx solid #f7f7f7;

      .patient-user {
        height: 100rpx;

        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 16rpx;
          vertical-align: -10rpx;
        }
      }
    }

    .patient-detail {
      padding-bottom: 32rpx;

      >view {
        margin-top: 20rpx;
      }
    }

    .patient-add {
      padding: 36rpx 0;
      background: #f7f7f7;
      border-radius: 16rpx;
      margin-top: 20rpx;

      image {
        width: 108rpx;
        height: 108rpx;
        margin-bottom: 24rpx;
      }
    }

    .line {
      height: 20rpx;
      background-color: #f7f7f7;
    }
  }

  >view {
    padding-left: 40rpx;
    padding-right: 40rpx;
  }
}

.mybtn {
  // padding: 0 40rpx;
  margin: 0 auto 0 auto;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  height: 180rpx;
  width: 100vw;
  display: flex;
  justify-content: center;
}
</style>
